<template>
	<view>
		<view class="uploaded">
			<view class="uploaded-item" v-for="(item, index) in temp" :key="index">
				<image @click="previewImage(index)" :src="item" mode="aspectFill"></image>
				<view @click.stop.prevent="delPic(index)" v-if="icon == true || icon == 'true'">x</view>
			</view>
		</view>
		<view @click="uploadHandle" v-if="temp.length < count && (showBtn == true ||  showBtn == 'true')" class="upload-btn flex-column"><text>+</text></view>
	</view>
</template>

<script>
export default {
	props: {
		// 是否显示删除图标
		icon: {
			type: String | Boolean,
			default: true
		},
		// 是否显示上传按钮
		showBtn: {
			type: String | Boolean,
			default: true
		},
		// 是否自动上传
		auto: {
			type: Boolean,
			default: false
		},
		// 最多上传的图片数量
		count: {
			type: String | Number,
			default: 9
		},
		// 是否压缩图片：默认原图+压缩图
		sizeType: {
			type: Array,
			default: ()=>['original', 'compressed']
		},
		// 图片来源：相册+相机
		sourceType: {
			type: Array,
			default: ()=>['album', 'camera']
		},
		// 是否开启预览
		preview: {
			type: String | Boolean,
			default: true
		},
		// 预览时图片指示器
		indicator: {
			type: String,
			default: 'none'
		},
		// 是否可循环预览
		loop: {
			type: String | Boolean,
			default: true
		},
		// 默认显示的文件列表
		files: {
			type: Array,
			default: ()=>[]
		}
	},
	data() {
		return {
			temp: [],
			file: []
		}
	},
	created(){
		this.setDefaultFiles();
		if(this.auto) this.uploadHandle();
	},
	methods: {
		// 处理默认图片
		setDefaultFiles(){
			this.temp = this.files.filter((item, index)=>index<this.count);
			this.file = this.files.filter((item, index)=>index<this.count);
		},
		// 触发上传
		uploadHandle(){
			uni.chooseImage({
				count: this.count,
				sizeType: this.sizeType,
				sourceType: this.sourceType,
				success: (res)=>{
					// 判读是否超过允许的最大张数
					let { tempFilePaths,tempFiles } = res;
					let diff = this.count - this.temp.length;
					if(diff <= 0) return;
					
					// 组合数据
					tempFilePaths = tempFilePaths.filter((item, index)=>index<diff);
					tempFiles = tempFiles.filter((item, index)=>index<diff);
					this.temp = this.temp.concat(tempFilePaths);
					this.file = this.file.concat(tempFiles);
					
					// 事件回调
					this.$emit('upload', {
						temps: tempFilePaths,
						files: tempFiles
					});
				}
			})
		},
		// 预览
		previewImage(index){
			if(this.preview == false || this.preview == 'false') return;
			uni.previewImage({
				current: index,
				urls: this.temp,
				indicator: this.indicator,
				loop: this.loop
			})
		},
		// 删除图片
		delPic(index){
			// 删除回调
			this.$emit('delete', {
				index,						// 当前图片的索引
				temp: this.temp[index],		// 当前图片本来路径
				file: this.file[index]		// 当前图片文件对象
			});
			this.temp = this.temp.filter((item,idx)=>index != idx);
			this.file = this.file.filter((item,idx)=>index != idx);
		}
	}
}
</script>

<style scoped>
.uploaded .uploaded-item{
	float: left;
	width: 120upx;
	height: 120upx;
	border-radius: 10upx;
	margin: 0 20upx 20upx 0;
	position: relative;
}
.uploaded .uploaded-item image{
	width: 100%;
	height: 100%;
	border-radius: 10upx;
}
.uploaded .uploaded-item view{
	width: 36upx;
	height: 36upx;
	line-height: 30upx;
	text-align: center;
	color: #fff;
	background: red;
	font-size: 24upx;
	border-radius: 50%;
	position: absolute;
	top: -10upx;
	right: -10upx;
	z-index: 9;
}

.upload-btn{
	color: #fff;
	width: 120upx;
	height: 120upx;
	font-size: 60upx;
	background: #eee;
	border-radius: 10upx;
	margin-bottom: 20upx;
}


.flex-row{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-column{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
